<template>
  <div class="login_dialog_container">
    <div class="dialog">
      <div class="title_box">
        <div>分享海报</div>

        <div>
          <img class="down_img" @click="convertToImage" src="@/assets/edit-ship/upload.png">
          <img @click="closeDialog" src="@/assets/common/close.png">
        </div>

      </div>

      <div id="canvasImg" ref="canvasImg" class="canvasImg">
        <img src="@/assets/home-img/ship.png">
        <div class="ship_name">{{ shipDetail.code }}<span><DictLabel v-model="shipDetail.shipStatus"
                                                                     code="ship_status"></DictLabel></span></div>
        <!--Basic Data-->
        <div class="ship-info-card">
          <div class="header">
            Basic Information
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">船型</span>
              <span class="value"> {{ shipDetail.shipTypeName }}</span>
            </div>
            <div class="info-item">
              <span class="label">建造年份</span>
              <span class="value">{{ shipDetail.yearOfBuild }}</span>
            </div>
            <div class="line"></div>
            <div class="info-item">
              <span class="label">船籍</span>
              <span class="value">  <DictLabel v-model="shipDetail.shipStatus" code="ship_native"></DictLabel></span>
            </div>
            <div class="info-item">
              <span class="label">航区</span>
              <span class="value">  <DictLabel v-model="shipDetail.navigationArea"
                                               code="navigation_area"></DictLabel></span>
            </div>
          </div>
        </div>

        <!--Ship Data-->
        <div class="ship-info-card">
          <div class="header">
            Ship Data
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">Deadweight</span>
              <span class="value"> {{ shipDetail.deadWeight }}</span>
            </div>
            <div class="info-item">
              <span class="label">GRT / NRT</span>
              <span class="value">{{ shipDetail.grossTonnage }} m</span>
            </div>
            <div class="line"></div>
            <div class="info-item">
              <span class="label">LOA</span>
              <span class="value">   {{ shipDetail.totalLength }} m</span>
            </div>
            <div class="info-item">
              <span class="label">Breadth Moulded</span>
              <span class="value"> {{ shipDetail.mouldedBreadth }} m</span>
            </div>
            <div class="line"></div>
            <div class="info-item">
              <span class="label">Hull Depth</span>
              <span class="value">{{ shipDetail.mouldedDepth }} ㎡</span>
            </div>
            <div class="info-item">
              <span class="label">Height</span>
              <span class="value">{{ shipDetail.overallHeight }}</span>
            </div>
            <div class="line"></div>
            <div class="info-item">
              <span class="label">Loaded Draft</span>
              <span class="value"> {{ shipDetail.draft }} days</span>
            </div>
            <div class="info-item">
              <span class="label">Service Speed</span>
              <span class="value">{{ shipDetail.designSpeed }}</span>
            </div>
            <div class="line"></div>
            <div class="info-item">
              <span class="label"> Full Speed</span>
              <span class="value">{{ shipDetail.designSpeed }}</span>
            </div>
          </div>
        </div>


        <!--Lease Information-->
        <div class="ship-info-card">
          <div class="header">
            Lease Information
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">当前状态</span>
              <span class="value"> <dict-label v-model="shipDetail.shipStatus" code="ship_status"></dict-label></span>
            </div>
            <div class="info-item">
              <span class="label">租期</span>
              <span class="value">  {{ shipDetail.leaseTerm }}</span>
            </div>
            <div class="line"></div>
            <div class="info-item">
              <span class="label">租期起始日期</span>
              <span class="value">   {{ shipDetail.leaseStartDate }}</span>
            </div>
            <div class="info-item">
              <span class="label">现有租船合约</span>
              <span class="value">   <dict-label v-model="shipDetail.currentCharterContract"
                                                 code="lease_method"></dict-label></span>
            </div>
            <div class="line"></div>
            <div class="info-item">
              <span class="label">船舶动态</span>
              <span class="value">   <dict-label v-model="shipDetail.shipNews" code="ship_dynamics"></dict-label></span>
            </div>
          </div>
        </div>

        <!--意向报价-->
        <div class="intentional_quotation">
          <div class="desc">意向报价</div>
          <div class="price">¥{{shipDetail.intendedQuote}}</div>
        </div>

        <!--介绍-->
        <div class="introduction">
          <div class="left">
            <div class="company">
              <img class="logo" src="@/assets/header-img/logo.png">
              <div class="company_name">上海昂旗海洋船舶有限公司</div>
            </div>
            <div class="items">
              <div class="item">
                <img src="@/assets/contact-us/company.png">
                <div>中国上海市徐汇区漕河泾开发区桂平路391号晨光科技大厦12楼</div>
              </div>
              <div class="item">
                <img src="@/assets/contact-us/phone.png">
                <div>021-38482129</div>
              </div>
              <div class="item">
                <img src="@/assets/contact-us/message.png">
                <div>kevin.chang@amflag.com</div>
              </div>
            </div>
          </div>
          <div class="right">
            <img :src="qrCodeUrl">
          </div>
        </div>

      </div>

    </div>

    <div class="mask"></div>
  </div>
</template>

<script setup>
import {ref, reactive,onMounted} from "vue";
import html2canvas from 'html2canvas';
import QRCode from 'qrcode';

//传进来要处理的shipDetial
const props = defineProps({
  //select的选项
  shipDetail: {
    type: Object,
    default: {},
  },
});


//生成海报
async function convertToImage() {
  try {
    const element = document.getElementById('canvasImg');
    const canvas = await html2canvas(element).then((canvas) => {
      // 4. 转换为图片并下载
      const imageData = canvas.toDataURL();
      const link = document.createElement('a');
      link.href = imageData;
      link.download = `${props.shipDetail.code}.'png'`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  } catch (e) {
    throw new Error(e);
  }
}

// 定义要触发的事件
const emit = defineEmits(['close']);

// 定义一个方法来触发事件
function closeDialog() {
  emit('close');
}

const qrCodeUrl = ref("")

//生成二维码
const generateQRCode = async () => {
  try {
    qrCodeUrl.value = await QRCode.toDataURL(window.location.href, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',  // 二维码点颜色
        light: '#ffffff' // 背景色
      }
    });
  } catch (err) {
    console.error('生成二维码失败:', err);
  }
};

onMounted(()=>{
  generateQRCode()
})


</script>

<style lang="scss" scoped>
.login_dialog_container {
  padding: 24px;
  background-color: #fff;
  border-radius: 24px;
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -10%);
  background-color: #fff;
  z-index: 20;
  padding: 24px;
  border-radius: 24px;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .4);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #1C1E24;
  .down_img{
    margin-right: 24px;
  }

  img {
    width: 24px;
    height: 24px;
  }
}

.form_area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 432px;
  margin-top: 24px;

  .form_item {
    margin-top: 16px;
    width: 100%;

    .label {
      font-size: 16px;
      font-weight: normal;
      line-height: 24px;
      letter-spacing: normal;
      color: #808690;
      margin-bottom: 8px;
    }

    .value {
      background: #F0F2F7;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: normal;
      color: #1C1E24;
      height: 40px;
      border-radius: 8px;

      input {
        width: 100%;
        border: none;
        outline: none;
        background: none;
        box-shadow: none;
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 8px 12px;
        border-radius: 8px;
      }

      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }

      ::v-deep .el-select__wrapper {
        padding: 6px 12px !important;
        box-sizing: border-box;
        border-radius: 8px;
        background: #F0F2F7;
        box-shadow: none;
        font-size: 14px;
        line-height: 20px;
        color: #808690;
        ::v-deep .el-select__selection .el-select__selected-item .el-select__selected-item span{
          color: pink !important;
        }
      }



      .el-select-dropdown-item {
        // 修改当前选中选项的文字显示颜色
        color: pink !important;
      }
    }
  }

  form_item:first-child {
    margin-top: 0;
  }

  .half {
    width: 48%;
  }
}

.text_box {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: right;
  letter-spacing: normal;
  justify-content: center;
  color: #1C1E24;
  margin-top: 24px;
}

.green_text {
  color: #1e90ff;
  margin-left: 8px;
}

button {
  border-radius: 8px;
  background: #1e90ff;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  letter-spacing: normal;
  color: #FFFFFF;
  width: 100%;
  padding: 8px 16px;
  margin-top: 24px;
}

/**生成的图片*/
.canvasImg {
  padding: 24px;

  img {
    width: 640px;
    height: 360px;
    border-radius: 16px;
  }

  .ship_name {
    font-size: 20px;
    font-weight: bold;
    line-height: 32px;
    color: #1C1E24;
    display: flex;
    align-items: center;
    padding: 16px 0;

    span {
      padding: 4px 8px;
      z-index: 1;
      background: #D1F7D2;
      font-size: 12px;
      line-height: 16px;
      color: #3D3D3D;
      margin-left: 8px;
      border-radius: 4px;
    }
  }

  .ship-info-card {
    width: 640px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid #EAECF2;
    margin-top: 16px;

    .header {
      background: #F6F8FC;
      box-sizing: border-box;
      border-width: 0px 0px 1px 0px;
      border-style: solid;
      border-color: #EAECF2;
      padding: 12px 24px;
      font-size: 18px;
      font-weight: bold;
      line-height: 24px;
      letter-spacing: normal;
      color: #1C1E24;
      border-radius: 16px 16px 0 0;
    }

    .info-grid {
      display: flex;
      align-items: center;
      padding: 8px 24px;
      flex-wrap: wrap;
    }

    .line {
      width: 100%;
      height: 1px;
      background-color: #EAECF2;
    }

    .info-item {
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      width: 48%;

      .label {
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: normal;
        color: #808690;
        margin-bottom: 4px;
      }

      .value {
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: normal;
        color: #1C1E24;
      }
    }

    .info-item:nth-child(1) {
      border: 0;
    }

    .info-item:nth-child(2) {
      border: 0;
    }
  }

  .intentional_quotation {
    margin-top: 16px;
    width: 640px;
    height: 128px;
    /* 自动布局 */
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    box-sizing: border-box;
    gap: 8px;
    border-radius: 16px;
    background: linear-gradient(101deg, #04BFAD 0%, #A6EEC3 100%);

    .desc {
      font-size: 18px;
      font-weight: bold;
      line-height: 24px;
      letter-spacing: normal;
      color: #FFFFFF;
    }

    .price {
      font-size: 48px;
      font-weight: bold;
      line-height: 64px;
      letter-spacing: normal;
      color: #FFFFFF;
    }
  }

  .introduction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    width: 640px;

    .left {
      .company {
        .logo {
          /* 自动布局子元素 */
          width: 80px;
          height: 32px;
          object-fit: contain;
        }

        .company_name {
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: normal;
          color: #1C1E24;
        }
      }

      .items {
        margin-top: 12px;

        .item {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: normal;
          color: #808690;
          margin-bottom: 8px;

          img {
            width: 20px;
            height: 20px;
            margin-right: 4px;
          }
        }

        .item:last-child {
          margin-bottom: 0;
        }
      }

    }

    .right {
      width: 144px;
      height: 144px;
      display: flex;
      padding: 12px;
      gap: 0px 16px;
      flex-wrap: wrap;
      align-content: flex-start;
      border-radius: 16px;
      background: #F6F8FC;
      box-sizing: border-box;
      border: 1px solid #EAECF2;

      img {
        width: 120px;
        height: 120px;
        flex-grow: 1;
        align-self: stretch;
        z-index: 0;
      }
    }
  }

}
</style>
